<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>3D立方体</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .main {
            width: 200px;
            height: 200px;
            margin: 150px auto;
            -webkit-transition: transform .6s;
            transition: transform .6s;
        }

        .cude {
            width: 200px;
            height: 200px;
            position: relative;
            transform-style: preserve-3d;
            -webkit-transform-style: preserve-3d;
            transform: rotateX(-45deg) rotateY(-45deg);
            transform-origin: 50% 50% 0;
            -webkit-transform-origin: 50% 50% 0;
            -webkit-animation: rotate 20s infinite;
            animation: rotate 20s infinite;
        }

        @-webkit-keyframes rotate {
            from {
                transform: rotateX(0deg) rotateY(0deg);
            }

            to {
                transform: rotateX(360deg) rotateY(360deg);
            }
        }

        /*外面一层*/
        .surface {
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 200px;
            background: #666;
            opacity: 0.8;
            font-size: 60px;
            text-align: center;
            line-height: 200px;
            font-weight: bold;
            color: #fff;
            border: 1px solid #fff;
            -webkit-transition: all .3s;
            transition: all .3s;
        }

        .front {
            transform: rotateY(0) translateZ(100px);
        }

        .back {
            transform: translateZ(-100px) rotateY(180deg);
        }

        .left {
            transform: rotateY(-90deg) translateZ(100px);
        }

        .right {
            transform: rotateY(90deg) translateZ(100px);
        }

        .top {
            transform: rotateX(90deg) translateZ(100px);
        }

        .bottom {
            transform: rotateX(90deg) translateZ(-100px);
        }

        .cude:hover .front {
            transform: rotateY(0) translateZ(150px);
        }

        .cude:hover .back {
            transform: translateZ(-150px) rotateY(180deg);
        }

        .cude:hover .left {
            transform: rotateY(-90deg) translateZ(150px);
        }

        .cude:hover .right {
            transform: rotateY(90deg) translateZ(150px);
        }

        .cude:hover .top {
            transform: rotateX(90deg) translateZ(150px);
        }

        .cude:hover .bottom {
            transform: rotateX(90deg) translateZ(-150px);
        }

        /*里面一层*/
        .surface-in {
            width: 100px;
            height: 100px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -50px;
            margin-left: -50px;
            background-color: #fff;
        }

        .surface-in img {
            width: 98px;
            height: 98px;
            border: 1px solid #ccc;
        }

        .front-in {
            transform: rotateY(0deg) translateZ(50px);
        }

        .back-in {
            transform: rotateY(180deg) translateZ(50px);
        }

        .left-in {
            transform: rotateY(-90deg) translateZ(50px);
        }

        .right-in {
            transform: rotateY(90deg) translateZ(50px);
        }

        .top-in {
            transform: rotateX(90deg) translateZ(-50px);
        }

        .bottom-in {
            transform: rotateX(-90deg) translateZ(-50px);
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="cude">
            <div class="surface front">正面</div>
            <div class="surface left">左面</div>
            <div class="surface right">右面</div>
            <div class="surface bottom">底面</div>
            <div class="surface top">顶面</div>
            <div class="surface back">背面</div>
            <div class="surface-in front-in">
                <img src="../../images/icon/jzy_logo.png" alt="" />
            </div>
            <div class="surface-in back-in">
                <img src="../../images/icon/jzy_logo.png" alt="" />
            </div>
            <div class="surface-in left-in">
                <img src="../../images/icon/jzy_logo.png" alt="" />
            </div>
            <div class="surface-in right-in">
                <img src="../../images/icon/jzy_logo.png" alt="" />
            </div>
            <div class="surface-in top-in">
                <img src="../../images/icon/jzy_logo.png" alt="" />
            </div>
            <div class="surface-in bottom-in">
                <img src="../../images/icon/jzy_logo.png" alt="" />
            </div>
        </div>
    </div>
</body>

</html>